<template>
	<view>
		<div class="header"></div>
		<div class="container">
		    <div class="profile-section">
		        <!-- 用户信息 -->
		        <div class="user-info">
		            <div class="user-header">
		                <div class="user-avatar">
		                    <span>张</span>
		                </div>
		                <div class="user-details">
		                    <div class="user-name">张三</div>
		                    <div class="user-id">ID: 888888</div>
		                </div>
		                <div class="user-actions">
		                    <div class="action-icon">💬</div>
		                    <div class="action-icon">🔔</div>
		                </div>
		            </div>
		            <div class="user-bio">这是我的个人简介，欢迎来到我的主页</div>
		        </div>
		
		        <!-- 功能卡片 -->
		        <div class="action-cards">
		            <div class="action-card">
		                <div class="card-header">
		                    <span class="card-icon">💬</span>
		                    <span class="card-count">12</span>
		                </div>
		                <div class="card-title">消息</div>
		            </div>
		            <div class="action-card">
		                <div class="card-header">
		                    <span class="card-icon">🔔</span>
		                    <span class="card-count">5</span>
		                </div>
		                <div class="card-title">通知</div>
		            </div>
		            <div class="action-card">
		                <div class="card-header">
		                    <span class="card-icon">👥</span>
		                    <span class="card-count">28</span>
		                </div>
		                <div class="card-title">好友</div>
		            </div>
		            <div class="action-card">
		                <div class="card-header">
		                    <span class="card-icon">⭐</span>
		                    <span class="card-count">99+</span>
		                </div>
		                <div class="card-title">收藏</div>
		            </div>
		        </div>
		
		        <!-- 设置区域 -->
		        <div class="settings-section">
		            <div class="settings-item">
		                <span class="settings-icon">⚙️</span>
		                <span>设置</span>
		            </div>
		            <div class="settings-item">
		                <span class="settings-icon">ℹ️</span>
		                <span>关于</span>
		            </div>
		        </div>
		    </div>
		</div>
	</view>
</template>

<script setup>
	
</script>

<style scoped lang="scss">
	.header {
	    background: linear-gradient(to bottom, #9b87f5, #7E69AB);
	    height: 8rem;
	}
	
	.container {
	    max-width: 480px;
	    margin: 0 auto;
	    padding: 0 1rem;
	}
	
	.profile-section {
	    margin-top: -4rem;
	    padding: 1.5rem;
	    animation: fadeIn 0.3s ease-out;
	}
	
	.user-info {
	    background: white;
	    border-radius: 1rem;
	    padding: 1.5rem;
	    margin-bottom: 1rem;
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}
	
	.user-header {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    margin-bottom: 1rem;
	}
	
	.user-avatar {
	    width: 4rem;
	    height: 4rem;
	    background-color: #9b87f5;
	    border-radius: 50%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: white;
	    font-size: 2rem;
	}
	
	.user-details {
	    flex-grow: 1;
	    margin-left: 1rem;
	}
	
	.user-name {
	    font-size: 1.25rem;
	    font-weight: 600;
	    margin-bottom: 0.25rem;
	}
	
	.user-id {
	    color: #666666;
	    font-size: 0.875rem;
	}
	
	.user-actions {
	    display: flex;
	    gap: 1rem;
	}
	
	.action-icon {
	    padding: 0.5rem;
	    border-radius: 50%;
	    cursor: pointer;
	}
	
	.action-icon:hover {
	    background-color: #F6F6F7;
	}
	
	.action-cards {
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
	    gap: 1rem;
	    margin: 1.5rem 0;
	}
	
	.action-card {
	    background: white;
	    padding: 1rem;
	    border-radius: 1rem;
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	    cursor: pointer;
	    transition: box-shadow 0.2s;
	}
	
	.action-card:hover {
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.card-header {
	    display: flex;
	    justify-content: space-between;
	    margin-bottom: 0.5rem;
	}
	
	.card-icon {
	    color: #9b87f5;
	}
	
	.card-count {
	    color: #9b87f5;
	    font-size: 0.875rem;
	    font-weight: 500;
	}
	
	.card-title {
	    font-weight: 500;
	}
	
	.settings-section {
	    background: white;
	    border-radius: 1rem;
	    overflow: hidden;
	    margin-bottom: 1.5rem;
	}
	
	.settings-item {
	    display: flex;
	    align-items: center;
	    padding: 1rem;
	    border-bottom: 1px solid #F6F6F7;
	    cursor: pointer;
	}
	
	.settings-item:last-child {
	    border-bottom: none;
	}
	
	.settings-item:hover {
	    background-color: #F6F6F7;
	}
	
	.settings-icon {
	    color: #666666;
	    margin-right: 0.75rem;
	}
	
	@keyframes fadeIn {
	    from {
	        opacity: 0;
	        transform: translateY(10px);
	    }
	    to {
	        opacity: 1;
	        transform: translateY(0);
	    }
	}
</style>
